<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="../img/asset-favicon.ico" />
    <title>学成在线2.0</title>
  
    <link rel="stylesheet" href="../plugins/normalize-css/normalize.css" />
    <link
  rel="stylesheet" href="../plugins/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="../css/page-learing-list.css" />
</head>
  <body>
    <div id="container">
      <!-- 页面头部 -->
      <!--头部导航-->
<header>
  <div id="headerContainer" class="learingHeader">
    <nav class="navbar">
      <div class="">
        <div class="logo">
          <img src="../img/asset-logoIco.png" width="100%" alt="" />
        </div>
        <div class="nav-list">
          <ul class="nav navbar-nav">
            <!-- TODO: 显示选中状态 -->
            <li class="active">
              <a
                :href="portal_url + '/pages/learing-index.html'"
                target="_blank"
                >首页</a
              >
            </li>
            <li>
              <a :href="portal_url + '/pages/learing-list.html'" target="_blank"
                >课程</a
              >
            </li>
            <li><a href="#">职业规划</a></li>
            <li></li>
          </ul>
        </div>

        <!-- 未登录 -->
        <div class="sign-in" v-if="!userName">
          <a :href="manage_url + '/#/login?isRegnew=0'">登录</a>
          <span>&nbsp;|&nbsp;</span>
          <a :href="manage_url + '/#/login?isRegnew=1'">注册</a>
        </div>
        <!-- 已登录 -->
        <div class="sign-in" v-else>
          <a :href="manage_url + '/#/personal/my-course'" class="personal">
            个人中心
          </a>
          <a :href="manage_url + '/#/organization/company'" class="personal">
            管理
          </a>
          /
          <div class="dropdown">
            <span class="dropbtn">入驻</span>
            <div class="dropdown-content">
              <a :href="manage_url + '/#/entering/company-entering'"
                >机构入驻</a
              >
              <a :href="manage_url + '/#/entering/personal-entering'"
                >个人入驻</a
              >
            </div>
          </div>
          <div class="personal">
            <span class="personalIco"></span>
          </div>
          <div class="dropdown myInfo">
            <div class="dropbtn">
              <img src="../img/asset-myImg.jpg" alt />
              <span v-text="userName"></span>
            </div>
            <div class="dropdown-content">
              <a href="javascript:;" @click="handleLogout">退出登录</a>
            </div>
          </div>
        </div>
        <div class="starch">
          <input
            type="text"
            id="inputSearch"
            class="input-search"
            placeholder="输入查询关键词"
          /><input id="btnQuery" type="submit" class="search-buttom" />
        </div>
      </div>
    </nav>
  </div>
</header>

      <div id="learing-list" class="learing-list">
  <div class="list-box">
    <ul>
      <li>一级分类：</li>
      <ol class="first-level">
        <li
          :index="-1"
          :class="categoryTreeNodeIndex === -1 ? 'active' : ''"
          @click="handleCategoryTreeNodeClick(-1)"
        >
          全部
        </li>
        <li
          v-for="(categoryTreeNode, index) in categoryTreeNodes"
          v-text="categoryTreeNode.label"
          :class="categoryTreeNodeIndex === index ? 'active' : ''"
          @click="handleCategoryTreeNodeClick(index)"
        ></li>
      </ol>
    </ul>
    <ul>
      <li>二级分类：</li>
      <ol class="second-level">
        <li
          :index="-1"
          :class="childrenTreeNodeIndex === -1 ? 'active' : ''"
          @click="handleChildrenTreeNodeClick(-1)"
        >
          全部
        </li>
        <li
          v-for="(childrenTreeNode, childrenIndex) in childrenTreeNodes"
          v-text="childrenTreeNode.label"
          :class="childrenTreeNodeIndex === childrenIndex ? 'active' : ''"
          @click="handleChildrenTreeNodeClick(childrenIndex)"
        ></li>
      </ol>
      <a href="#" class="more">更多 ∨</a>
    </ul>
    <ul>
      <li>难度等级：</li>
      <ol>
        <li
          :index="-1"
          :class="gradeIndex === -1 ? 'active' : ''"
          @click="handleGradeClick(-1)"
        >
          全部
        </li>
        <li
          v-for="(grade, index) in grades"
          v-text="grade.grade"
          :class="gradeIndex === index ? 'all' : ''"
          @click="handleGradeClick(index)"
        ></li>
      </ol>
    </ul>
  </div>
</div>
<!-- <script type="text/javascript" src="learing-list-title.js"></script> -->


      <div class="container">
        <div class="row">
          <div class="col-md-9 list-row-left">
            <div class="list-cont-left">
  <div class="tit">
    <ul class="nav nav-tabs ">
      <li
        v-for="(sortField, index) in sortFields"
        :class="sortIndex === index ? 'active' : ''"
        @click="handleSortFieldClick(index)"
      >
        <a href="#" v-text="sortField"></a>
      </li>
      <div class="page navbar-right">
        <i class="prev" @click="prevPage">&lt;</i>
        <span class="">{{ pageNo }}/{{ pages }}</span>
        <i class="next" @click="nextPage">&gt;</i>
      </div>
    </ul>
  </div>
  <div class="tab-content">
    <div class="content-list">
      <!-- 课程分页 -->
      <template v-for="(item, index) in courses">
        <div class="recom-item">
          <a
            :href="qiniu_url + '/pages/' + item.indexId + '.html'"
            target="_blank"
          >
            <p><img :src="item.pic" width="100%" alt="" /></p>
            <ul>
              <!-- TODO: 关键字高亮 -->
              <li v-html="item.name"></li>
              <li>
                <span>{{ item.grade }}</span> <em> · </em> {{ item.learners
                }}人在学习
              </li>
            </ul>
          </a>
        </div>
      </template>
      <li class="clearfix"></li>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

          </div>
          <div class="col-md-3 list-row-rit">
            <div class="list-cont-right">
  <div class="right-box">
    <div class="tit">精品TOP榜</div>
    <div class="contList">
      <div class="contList-item">
        <div class="box hov">
          <div class="info">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <li><span>高级</span> <em> · </em> 1125人在学习</li>
          </div>
          <div class="infoImg">
            <div>
              <img src="../img/widget-topBg.png" width="100%" height="110" alt="" />
            </div>
            <div class="desc">
              通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
            </div>
          </div>
        </div>
      </div>
      <div class="contList-item">
        <div class="box">
          <div class="info">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <li><span>高级</span> <em> · </em> 1125人在学习</li>
          </div>
          <div class="infoImg">
            <div>
              <img src="../img/widget-topBg.png" width="100%" height="110" alt="" />
            </div>
            <div class="desc">
              通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
            </div>
          </div>
        </div>
      </div>
      <div class="contList-item">
        <div class="box">
          <div class="info">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <li><span>高级</span> <em> · </em> 1125人在学习</li>
          </div>
          <div class="infoImg">
            <div>
              <img src="../img/widget-topBg.png" width="100%" height="110" alt="" />
            </div>
            <div class="desc">
              通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
            </div>
          </div>
        </div>
      </div>
      <div class="contList-item">
        <div class="box">
          <div class="info">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <li><span>高级</span> <em> · </em> 1125人在学习</li>
          </div>
          <div class="infoImg">
            <div>
              <img src="../img/widget-topBg.png" width="100%" height="110" alt="" />
            </div>
            <div class="desc">
              通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
            </div>
          </div>
        </div>
      </div>
      <div class="contList-item">
        <div class="box">
          <div class="info">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <li><span>高级</span> <em> · </em> 1125人在学习</li>
          </div>
          <div class="infoImg">
            <div>
              <img src="../img/widget-topBg.png" width="100%" height="110" alt="" />
            </div>
            <div class="desc">
              通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
            </div>
          </div>
        </div>
      </div>
      <div class="contList-item">
        <div class="box">
          <div class="info">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <li><span>高级</span> <em> · </em> 1125人在学习</li>
          </div>
          <div class="infoImg">
            <div>
              <img src="../img/widget-topBg.png" width="100%" height="110" alt="" />
            </div>
            <div class="desc">
              通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tit">猜你喜欢</div>
    <div class="contList">
      <div class="contList-item">
        <div class="box hov">
          <div class="info">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <li><span>高级</span> <em> · </em> 1125人在学习</li>
          </div>
          <div class="infoImg">
            <!-- TODO: 图片链接地址 -->
            <div>
              <img src="../img/widget-btnbg.png" width="100%" height="110" alt="" />
            </div>
            <div class="desc">
              通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
            </div>
          </div>
        </div>
      </div>
      <div class="contList-item">
        <div class="box">
          <div class="info">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <li><span>高级</span> <em> · </em> 1125人在学习</li>
          </div>
          <div class="infoImg">
            <div>
              <img src="../img/widget-btnbg.png" width="100%" height="110" alt="" />
            </div>
            <div class="desc">
              通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
            </div>
          </div>
        </div>
      </div>
      <div class="contList-item">
        <div class="box">
          <div class="info">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <li><span>高级</span> <em> · </em> 1125人在学习</li>
          </div>
          <div class="infoImg">
            <div>
              <img src="../img/widget-btnbg.png" width="100%" height="110" alt="" />
            </div>
            <div class="desc">
              通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
            </div>
          </div>
        </div>
      </div>
      <div class="contList-item">
        <div class="box">
          <div class="info">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <li><span>高级</span> <em> · </em> 1125人在学习</li>
          </div>
          <div class="infoImg">
            <div>
              <img src="../img/widget-btnbg.png" width="100%" height="110" alt="" />
            </div>
            <div class="desc">
              通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
            </div>
          </div>
        </div>
      </div>
      <div class="contList-item">
        <div class="box">
          <div class="info">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <li><span>高级</span> <em> · </em> 1125人在学习</li>
          </div>
          <div class="infoImg">
            <div>
              <img src="../img/widget-btnbg.png" width="100%" height="110" alt="" />
            </div>
            <div class="desc">
              通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
            </div>
          </div>
        </div>
      </div>
      <div class="contList-item">
        <div class="box">
          <div class="info">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <li><span>高级</span> <em> · </em> 1125人在学习</li>
          </div>
          <div class="infoImg">
            <div>
              <img src="../img/widget-btnbg.png" width="100%" height="110" alt="" />
            </div>
            <div class="desc">
              通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

          </div>
        </div>
      </div>
    </div>
    <!-- 页面底部 -->
    <!--底部版权-->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-7">
        <div>
          <!--<h1 style="display: inline-block">学成网</h1>--><img
            src="../img/asset-logoIco.png"
            alt=""
          />
        </div>
        <div>
          学成网致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
        </div>
        <div>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</div>
        <input type="button" class="btn btn-primary" value="下 载" />
      </div>
      <div class="col-md-5 row">
        <dl class="col-md-4">
          <dt>关于学成网</dt>
          <dd>关于</dd>
          <dd>管理团队</dd>
          <dd>工作机会</dd>
          <dd>客户服务</dd>
          <dd>帮助</dd>
        </dl>
        <dl class="col-md-4">
          <dt>新手指南</dt>
          <dd>如何注册</dd>
          <dd>如何选课</dd>
          <dd>如何拿到毕业证</dd>
          <dd>学分是什么</dd>
          <dd>考试未通过怎么办</dd>
        </dl>
        <dl class="col-md-4">
          <dt>合作伙伴</dt>
          <dd>合作机构</dd>
          <dd>合作导师</dd>
        </dl>
      </div>
    </div>
  </div>
</footer>

    <!-- 页面 css js -->
  
<script
  type="text/javascript" src="../plugins/jquery/dist/jquery.js"></script>
<script
  type="text/javascript" src="../plugins/bootstrap/dist/js/bootstrap.js"></script>
<script
  type="text/javascript" src="../plugins/jscookie/js.cookie.js"></script>
<script type="text/javascript" src="../plugins/vue/vue.js"></script>
<script type="text/javascript" src="../js/util-env.js"></script>
<script type="text/javascript" src="../js/util-request-ajax.js"></script>
<script type="text/javascript" src="../js/util-api.js"></script>
<script type="text/javascript" src="../js/widget-header.js"></script>
<script type="text/javascript" src="../js/widget-header_vue.js"></script>
<script type="text/javascript">
  $('.list-cont-left .nav-tabs li').on('click', function() {
    $(this)
      .addClass('active')
      .siblings()
      .removeClass('active')
  })


  $('.contList-item').hover(
    function() {
      $(this)
        .find('.box')
        .addClass('hov')
        .parent()
        .siblings()
        .find('.box')
        .removeClass('hov')
    },
    function() {
      $(this)
        .siblings()
        .first()
        .find('.box')
        .addClass('hov')
        .parent()
        .siblings()
        .find('.box')
        .removeClass('hov')
    }
  )
</script>
<script type="text/javascript" src="../js/page-learing-list.js"></script>
</body>
</html>
